import React, {useLayoutEffect, useState} from "react";
import {NavLink} from "react-router-dom";
import {Collapse, Drawer, List, ListItem, makeStyles, SvgIcon, Typography} from "@material-ui/core";
import {
    ArrowDropDown,
    ArrowDropUp,
    BuildRounded,
    BusinessCenterRounded,
    BusinessRounded,
    ContactMailRounded,
    DashboardRounded,
    FindInPageRounded,
    LocalCarWashRounded,
    LocalShippingRounded,
    MapRounded,
    NavigationRounded,
    PeopleOutlineRounded,
    PersonRounded,
    ReportProblemRounded,
    ViewAgendaRounded
} from "@material-ui/icons";
import cn from "classnames";
import Scrollbar from "react-custom-scrollbars";

import {computeHeight, getInitials} from "../../../../shared/utilities/common.util";

const navList = [
    {id: "dashboard", path: "/dashboard", label: 'Dashboard', icon: DashboardRounded},
    {
        id: "inspection", label: "Inspection", icon: FindInPageRounded, subMenu:
            [
                {id: "inspectionReport", path: "/inspectionReport", label: 'Inspection Report'},
                {id: "incidentReport", path: "/incidentReport", label: 'Incident Report'},
                {id: "reminder", path: "/reminder", label: 'Reminder'}
            ]
    },
    {
        id: "maintenance", label: "Maintenance", icon: BusinessRounded, subMenu:
            [
                {id: "workorder", path: "/workorder", label: 'Workorder'},
                {id: "request", path: "/request", label: 'Request'},
                {id: "scheduler", path: "/scheduler", label: 'Scheduler'},
                {id: "inventory", path: "/inventory", label: 'Parts Inventory'},
                {id: "laborCodes", path: "/laborCodes", label: 'Labor Codes'}
            ]
    },
    {id: "faults", path: "/faults", label: 'Fault List', icon: ReportProblemRounded},
    {
        id: "toolMgmt", label: "Tool Management", icon: BuildRounded, subMenu:
            [
                {id: "toolsInventory", path: "/toolsInventory", label: 'Tools Inventory'},
                {id: "checkInCheckOut", path: "/checkInCheckOut", label: 'Check-In Check-Out'}
            ]
    },
    {id: "products", path: "/products", label: 'Products', icon: ViewAgendaRounded},
    {id: "addresses", path: "/addresses", label: 'Addresses', icon: ContactMailRounded},
    {id: "routes", path: "/routes", label: 'Routes', icon: NavigationRounded},

    {
        id: "routePlanner", label: "Route Planner", icon: MapRounded, subMenu:
            [
                {id: "planning", path: "/planning", label: 'Planning'},
                {id: "operations", path: "/operations", label: 'Operations'},
                {id: "finance", path: "/finance", label: 'Finance'}
            ]
    },

    {id: "vehicles", path: "/vehicles", label: 'Vehicles', icon: LocalShippingRounded},
    {id: "team", path: "/team", label: 'Team', icon: PeopleOutlineRounded},
    {id: "site", path: "/site", label: 'Site/Project', icon: BusinessCenterRounded},
    {id: "settings", path: "/settings", label: 'Account', icon: PersonRounded}
];

const useStyles = makeStyles((theme) => ({
    flexGrow: {flexGrow: 1},
    drawer: {
        width: 260,
        flexShrink: 0,
        whiteSpace: "nowrap"
    },
    drawerOpen: {
        width: 260,
        transition: theme.transitions.create("width", {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen
        })
    },
    drawerClose: {
        transition: theme.transitions.create("width", {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen
        }),
        overflowX: "hidden",
        width: theme.spacing(10)
    },
    drawerPaper: {
        color: theme.palette.white,
        backgroundColor: theme.palette.black,
        opacity: 0.8,
        boxShadow: theme.shadows[4]
    },
    toolbar: {
        ...theme.mixins.toolbar,
        display: 'flex',
        alignItems: 'center',
        width: 'auto',
        margin: theme.spacing(0, 2),
        padding: theme.spacing(1.25),
        borderBottom: `1px solid ${theme.palette.grey[200]}`
    },
    toolbarTitle: {
        color: theme.palette.white,
        fontWeight: 500
    },
    navList: {
        paddingBottom: theme.spacing(4)
    },
    navItem: {
        color: 'inherit',
        margin: 0,
        padding: 0,
        display: 'block',
        position: 'relative',
        textDecoration: 'none'
    },
    navIcon: {
        width: theme.spacing(4),
        height: theme.spacing(3),
        textAlign: 'center',
        marginRight: theme.spacing(2)
    },
    navTextIcon: {
        ...theme.typography.subtitle2,
        lineHeight: "32px",
        color: "inherit",
        minWidth: theme.spacing(4),
        textAlign: 'center',
        marginRight: theme.spacing(2)
    },
    navText: {
        lineHeight: "32px",
        color: "inherit"
    },
    hideText: {
        opacity: 0
    },
    link: {
        display: "flex",
        alignItems: "center",
        width: "auto",
        margin: theme.spacing(1.25, 1.875, 0),
        padding: theme.spacing(1.25),
        borderRadius: 3,
        ...theme.typography.subtitle2,
        color: "inherit",
        "&:hover": {
            outline: 'none',
            backgroundColor: `rgba(200, 200, 200, .2)`
        }
    },
    linkActive: {
        backgroundColor: theme.palette.primary.dark,
        boxShadow: `0 12px 20px -10px rgba(26, 35, 126, .28), 0 4px 20px 0 rgba(26, 35, 126, .12), 0 7px 8px -5px rgba(26, 35, 126, .2)`,
        "&:hover": {
            outline: 'none',
            backgroundColor: theme.palette.primary.dark
        }
    }
}));

export default ({openSidebar}) => {
    const classes = useStyles();
    const [contentHeight, setContentHeight] = useState(computeHeight(64));
    const [collapseState, setCollapseState] = useState({
        inspection: false,
        maintenance: false,
        toolMgmt: false
    });

    useLayoutEffect(() => {
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    const handleResize = () => setTimeout(() => setContentHeight(computeHeight(64)), 500);

    const handleSubMenuClick = menuId => {
        setCollapseState({
            ...collapseState,
            [menuId]: !collapseState[menuId]
        });
    };

    const getSidebarNav = (navList, isSubList = false) => {
        return <List component="ul" disablePadding className={cn({[classes.navList]: !isSubList})}>
            {navList.map(page => {
                const isSubMenu = !!page.subMenu;
                let navItem = null;

                if (isSubMenu) {
                    navItem = <React.Fragment>
                        <ListItem component={"li"} className={classes.navItem}
                                  onClick={() => handleSubMenuClick(page.id)}>
                            <div className={classes.link}>
                                {page.icon && <SvgIcon className={classes.navIcon} component={page.icon}/>}
                                <Typography
                                    className={cn(classes.navText, {[classes.hideText]: !openSidebar})}
                                    variant="subtitle2"
                                >
                                    {page.label}
                                </Typography>
                                <div className={classes.flexGrow}/>
                                {collapseState[page.id] ? <ArrowDropUp/> : <ArrowDropDown/>}
                            </div>
                        </ListItem>
                        <Collapse in={collapseState[page.id]} timeout="auto" unmountOnExit>
                            {getSidebarNav(page.subMenu, true)}
                        </Collapse>
                    </React.Fragment>;
                } else {
                    navItem = <ListItem key={page.id} component={"li"} className={classes.navItem}>
                        <NavLink className={classes.link} exact to={page.path} activeClassName={classes.linkActive}>
                            {page.icon ?
                                <SvgIcon className={classes.navIcon} component={page.icon}/> :
                                <span className={classes.navTextIcon}>{getInitials(page.label)}</span>
                            }
                            <Typography className={cn(classes.navText, {[classes.hideText]: !openSidebar})}
                                        variant="subtitle2">
                                {page.label}
                            </Typography>
                        </NavLink>
                    </ListItem>;
                }
                return navItem;
            })}
        </List>;
    };

    return <Drawer
        variant="permanent"
        className={cn(classes.drawer, {[classes.drawerOpen]: openSidebar, [classes.drawerClose]: !openSidebar})}
        classes={{
            paper: cn(classes.drawerPaper, {
                [classes.drawerOpen]: openSidebar,
                [classes.drawerClose]: !openSidebar
            })
        }}
    >
        <div className={classes.toolbar}>
            <SvgIcon className={classes.navIcon} component={LocalCarWashRounded}/>
            <Typography variant={"h6"} className={cn(classes.toolbarTitle, {[classes.hideText]: !openSidebar})}>
                Heavy Vehicle Inspection
            </Typography>
        </div>
        <Scrollbar
            autoHide
            autoHeight
            autoHeightMin={0}
            autoHeightMax={contentHeight}
            renderTrackHorizontal={(props) => (<div {...props} style={{display: "none"}}/>)}
            renderThumbHorizontal={(props) => (<div {...props} style={{display: "none"}}/>)}
        >
            {navList && getSidebarNav(navList)}
        </Scrollbar>
    </Drawer>;
};